/*
  学习目标：子传父
  // 父组件，传一个函数给子组件
  // 子组件：调用父组件传来的函数,传回数据即可
*/
import React from 'react';
// 类组件
class APP extends React.Component {
  state = {
    money: 10000,
  };
  handleClickMoney = () => {
    this.setState({
      money: this.state.money + 1000,
    });
  };
  // 父组件的方法
  handleCostFn = (num) => {
    console.log('num----->', num);
    // 通过setState修改数据更新视图即可
    this.setState({
      money: this.state.money - num,
    });
  };
  render() {
    return (
      <div>
        <h3>父亲的钱：{this.state.money}</h3>
        <button onClick={this.handleClickMoney}>父亲开始赚钱</button>
        {/* 传递给子组件的数据 */}
        <Child money={this.state.money} handleCost={this.handleCostFn}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    // this.props获取数据
    console.log('this.props----->', this.props);
    return (
      <div>
        <h3>父亲给儿子的钱：{this.props.money}</h3>
        {/* 调用时需要传递参数，可以改成函数，在函数里面再调用handleCost，传递参数即可 */}
        <button onClick={() => this.props.handleCost(100)}>
          我要花父亲的钱了
        </button>
      </div>
    );
  }
}

export default APP;
